<template>
  {{ count }}
  <h2>{{ msg }}</h2>
  <button @click="editCountHandler">修改数据</button>
  <button @click="reset">重置数据</button>
</template>
<script lang="ts" setup>
import { storeToRefs } from "pinia";
import useCountSlice from "./store/modules/countSlice";
const countSlice = useCountSlice();
// storeToRefs 可以让我们结构出来的数据 依然是个相适应的
const { count, msg } = storeToRefs(countSlice);
const editCountHandler = () => {
  // countSlice.increment(10);
  // countSlice.count += 10;
  // countSlice.msg += "1";
  countSlice.$patch({
    count: countSlice.count + 10,
    msg: countSlice.msg + "1",
  });
};
const reset = () => {
  // 重置pinia里状态数据
  countSlice.$reset();
};
</script>

<style lang="less" scoped></style>
